<template>
     <view class="" style="width: 100%;z-index: 1000; margin: auto;position: fixed;top: 50%;transform: translateY(-50%);">
         <view class="spinner">
           <view class="bounce1 box" ></view>
           <view class="bounce2 box"></view>
           <view class="bounce3 box"></view>
         </view>
     </view>
 </template>
 
 <script>
 </script>
  
 <style scoped lang="scss">
     .spinner {
       // margin: 100px auto ;
       // width: 150px;
       text-align: center;
	   padding-top: 120rpx;
	  margin: auto;width:480rpx;height: 246rpx; background: #707070;
  border: 2rpx solid #707070;
  opacity: 0.68;
  border-radius: 20rpx;;
	  
     }
      
     .box {
       width: 30rpx;
       height: 30rpx;
       background-color: white;
       border-radius: 50%;
       display: inline-block;
       -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
       animation: bouncedelay 1.4s infinite ease-in-out;
       -webkit-animation-fill-mode: both;
       animation-fill-mode: both;
     }
      
     .spinner .bounce1 {
       -webkit-animation-delay: -0.32s;
       animation-delay: -0.32s;
     }
      
     .spinner .bounce2 {
       -webkit-animation-delay: -0.16s;
       animation-delay: -0.16s;
     }
      
     @-webkit-keyframes bouncedelay {
       0%, 80%, 100% { -webkit-transform: scale(0.0) }
       40% { -webkit-transform: scale(1.0) }
     }
      
     @keyframes bouncedelay {
       0%, 80%, 100% {
         transform: scale(0.0);
         -webkit-transform: scale(0.0);
       } 40% {
         transform: scale(1.0);
         -webkit-transform: scale(1.0);
       }
     }
 
 </style>